<template>
  <view>
    <view class="safe-area-inset-bottom">
      <view class="swip_header">
        <view class="slot-box">
          <view style="width: 100%;">
            <uni-search-bar
                v-model="queryParams.params.findApi"
                type="text"
                @confirm="handleQuery"
                @input="handleQuery"
                placeholder="请输入订单编号或名称"/>
          </view>
        </view>
      </view>
      <!-- 账户明细列表 -->
      <view style="margin-bottom: 100rpx;">
        <!-- 账户明细列表 -->

        <view v-if="!!dataList && dataList.length > 0" class="listSearchTop">
          <checkbox-group @change="checkboxChange">
            <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index" @click="detail(item)">
              <view class="flex_between">
                <p class="grid-hidden">订单名称：{{ item.name }}</p>
                <checkbox
                    @click.stop
                    style="transform:scale(0.7)"
                    color="#00a660"
                    :value="item.id.toString()"
                    :checked="item.checked"
                    :disabled="!(item.invoiceStatus == 2 && item.status == 1)"
                />
              </view>
              <p class="grid-integral">订单编号：{{ item.number }}</p>
              <p class="grid-integral">支付类型：
                <template v-for="(dictItem, index) in dicts.ec_order_pay_type">
                  <template v-if="item.payType == dictItem.value">
                    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
                  </template>
                </template>
              </p>
              <p class="grid-integral">支付金额：
                <span v-if="item.payType == 1">{{ item.amount }}g碳能量</span>
                <span v-else>{{ item.amount }}元</span>
              </p>
              <p class="grid-integral">订单状态：
                <template v-for="(dictItem, index) in dicts.ec_order_status">
                  <template v-if="item.status == dictItem.value">
                    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
                  </template>
                </template>
              </p>
              <p class="grid-integral">发票状态：
                <template v-for="(dictItem, index) in dicts.ec_invoice_status">
                  <template v-if="item.invoiceStatus == dictItem.value">
                    <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
                  </template>
                </template>
              </p>
              <p class="grid-integral">创建时间：{{ item.payTime }}</p>
              <p class="grid-integral">支付时间：{{ item.createTime }}</p>
            </uni-card>
          </checkbox-group>
          <!-- 加载更多 -->
          <uni-load-more color="#00a660" :status="loadStatus"/>
        </view>
        <!-- 暂无数据 -->
        <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
      </view>
      <!-- 底部全选/合并开票 -->
      <view class="foot-menu flex_between">
        <checkbox-group @change="checkboxAllChange">
          <label>
            <checkbox
                style="transform:scale(0.7)"
                color="#00a660"
                :checked="allFlag.checked"
                :value="allFlag.cb"/>
            全选
          </label>
        </checkbox-group>
        <button size="mini" class="green_btn" :disabled="multiple" @click="showInvoicing">合并开票</button>
      </view>
    </view>
    <!-- 合并开票 -->
    <invoice-dialog ref="invoiceDialog" @success="handleQuery"></invoice-dialog>
  </view>
</template>

<script>
import {listOrderPay} from "@/api/ec/person/fee/orderPay";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {getDictsByNameForUni} from "@/utils/dicts";
import invoiceDialog from "./invoiceDialog";

export default {
  components: {luanqingEmpty, invoiceDialog},
  data() {
    return {
      // 数据字典
      dicts: {
        // 支付类型
        ec_order_pay_type: [],
        // 订单支付状态
        ec_order_status: [],
        // 发票状态
        ec_invoice_status: [],
      },
      // 全选框
      allFlag: {
        value: 'cb',
        checked: false
      },
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 开票合并金额
      invoiceAmount: 0.00,
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        inOutType: null,
        channel: null,
        params: {
          findApi: undefined
        }
      },
    }
  },
  onLoad() {
    this.getDicts()
  },
  created() {
    this.getList();
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        // 执行查询的方法
        this.getList(false);
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      // 支付类型
      this.dicts.ec_order_pay_type = getDictsByNameForUni("ec_order_pay_type");
      // 订单支付状态
      this.dicts.ec_order_status = getDictsByNameForUni("ec_order_status");
      // 发票状态
      this.dicts.ec_invoice_status = getDictsByNameForUni("ec_invoice_status");
    },
    // ===============================================================================================================
    // ==== 复选框选择
    // ===============================================================================================================
    /** 全选复选框的checkbox-group  changge事件 */
    checkboxAllChange(e) {
      // 选中的选项数据
      let selection = [];
      // 取消全选
      if (e.detail.value.length == 0) {
        this.dataList.map(item => this.$set(item, 'checked', false));
        this.$set(this.allFlag, 'checked', false);
        selection = [];
      } else {
        // 全选
        this.dataList.map(item => {
          // 可开票数据才可以被选中
          if (item.invoiceStatus == 2 && item.status == 1) {
            this.$set(item, 'checked', true);
            selection.push(item);
          }
        });
        this.$set(this.allFlag, 'checked', true);
      }
      this.handleSelectionChange(selection);
    },
    /** 复选框组合的checkbox-group  changge事件*/
    checkboxChange(e) {
      let items = this.dataList;
      let values = e.detail.value;
      for (let i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        if (values.includes(item.id.toString())) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false);
        }
      }
      // 是否全部勾选，判断全选与否状态
      let offCarArr = [];
      this.dataList.forEach(item => (item.invoiceStatus == 2 && item.status == 1) ? offCarArr.push(item) : '');
      let allChecks = offCarArr.every(item => item.checked == true);
      allChecks ? this.$set(this.allFlag, 'checked', true) : this.$set(this.allFlag, 'checked', false);

      // 选中的选项数据
      let selection = [];
      this.dataList.forEach(item => (item.checked) ? selection.push(item) : '');
      this.handleSelectionChange(selection);
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = !selection.length;
      let sum = 0.00;
      selection.map(function (item) {
        sum += parseFloat(item.amount);
      });
      this.invoiceAmount = sum.toFixed(2);
    },
    // ===============================================================================================================
    // ==== 数据列表
    // ===============================================================================================================
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
        this.$set(this.allFlag, 'checked', false);
      }
      listOrderPay(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 查看详情 */
    detail(item) {
      uni.navigateTo({
        url: './orderDetail?dataDetails=' + JSON.stringify(item)
      })
    },
    /** 合并开票 */
    showInvoicing() {
      this.$refs.invoiceDialog.toOpenDialog(this.ids, this.invoiceAmount)
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: $uni-bg-color-grey;
}

.foot-menu {
  width: 100%;
  height: 100rpx;
  background: #fff;
  position: fixed;
  padding: 0 25rpx;
  bottom: 0; /**距离底部为0*/
  left: 0;
  z-index: 1;
  border-top: 2rpx #ebeef5 solid;
  display: flex;
}
</style>
